<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { addArt, editArt, showArt } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      formData: {
        article_type: "",
        article_title: "",
        article_content: "",
      },
      rules: {
        article_type: [
          {
            required: true,
            message: "请选择公告平台",
            trigger: "change",
          },
        ],
        article_title: [
          {
            required: true,
            message: "请输入公告标题",
            trigger: "blur",
          },
        ],
        article_content: [
          {
            required: true,
            message: "请输入公告内容",
            trigger: "blur",
          },
        ],
      },
      deskArr: [
        { label: "企业端", value: "企业端" },
        { label: "培训端", value: "培训端" },
        { label: "船东端", value: "船东端" },
        { label: "小程序端", value: "小程序端" },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const { data } = this.detailId
        ? await editArt(this.formData)
        : await addArt(this.formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      showArt({ article_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.formData["article_id"] = this.detailId;
        }
      });
    },
  },
  mounted() {},

  created() {
    if (this.detailId) {
      this.getData();
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>公告设置</div>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes flexPull">
              <div class="desTitle">
                <div>配置公告通知</div>
              </div>
              <el-form ref="ruleForm" :rules="rules" :model="formData">
                <div class="hasTop">
                  <el-form-item
                    label-width="120"
                    prop="article_type"
                    label="公告平台"
                  >
                    <el-select
                      v-model="formData.article_type"
                      placeholder="请选择公告平台"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in deskArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label-width="120"
                    prop="article_title"
                    label="公告标题"
                  >
                    <el-input
                      v-model="formData.article_title"
                      placeholder="请输入公告标题"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label-width="120"
                    prop="article_content"
                    label="公告内容"
                  >
                    <el-input
                      v-model="formData.article_content"
                      maxlength="3000"
                      placeholder="请输入公告内容"
                      show-word-limit
                      :rows="8"
                      type="textarea"
                    />
                  </el-form-item>
                  <el-form-item label-width="120" label="">
                    <btn value="保存设置" @click="saveFn"></btn>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
